<template>
    <a-card>
        <template #title>
            <a-range-picker filterable v-model:value="dates" valueFormat="YYYY-MM-DD" :allowClear='false' @change="change" />
            <a-spin v-if="queryIng" class="m-l-10" size="small" />
        </template>
        <div :class="$style.items">
            <div :class="$style.item">
                <div>充电收入(元)</div>
                <v-chart v-if="inited" :class="$style.chart" :option="incomeOptions" autoresize />
                <a-skeleton class="m-t-20" v-else active />
            </div>
            <div :class="$style.item">
                <div>充电订单数量(笔)</div>
                <v-chart v-if="inited" :class="$style.chart" :option="chargeCountOptions" autoresize />
                <a-skeleton class="m-t-20" v-else active />
            </div>
        </div>
        
    </a-card>
</template>

<script lang="ts" setup>
    import { use } from 'echarts/core';
    import { CanvasRenderer } from 'echarts/renderers';
    import { BarChart } from 'echarts/charts';
    import {
        TitleComponent,
        TooltipComponent,
        LegendComponent,
        GridComponent,
    } from 'echarts/components';
    import VChart from 'vue-echarts';
    import { ref } from 'vue';
    import { queryDailyAmountChargeCountDataApi } from '@/api/merchant/Dashboard';
    import dayjs from 'dayjs';
  

    use([
        CanvasRenderer,
        BarChart,
        TitleComponent,
        TooltipComponent,
        LegendComponent,
        GridComponent
    ]);

    const queryIng = ref(false)


    const dates = ref([dayjs().subtract(7, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')])


    function change() {
        queryData()
    }

    const inited = ref(false)

    const common = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },

        yAxis: [
            {
            type: 'value'
            }
        ],

        xAxis : {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            }
        },

        series : {
            type: 'bar',
            barWidth: 30,
        }
    }


    const incomeOptions = ref<any>({
        tooltip : common.tooltip,
        grid : common.grid,
        yAxis : common.yAxis,
        xAxis: [
            {
                
                data: [],
                ...common.xAxis,
            }
        ],
        series: [
            {
            name: '充电收入',
            ...common.series,
                data: []
            }
        ]
    })

    const chargeCountOptions = ref<any>({
        tooltip : common.tooltip,
        grid : common.grid,
        yAxis : common.yAxis,
        xAxis: [
            {
                
                data: [],
                ...common.xAxis,
            }
        ],
        series: [
            {
            name: '订单数量',
            ...common.series,
                data: []
            }
        ]
    })

    async function queryData() {
        queryIng.value = true
        const r = await queryDailyAmountChargeCountDataApi(dayjs(dates.value[0]).unix(), dayjs(dates.value[1]).unix())
        if(r.success) {
            const dates:string[] = []
            incomeOptions.value.series[0].data = []
            chargeCountOptions.value.series[0].data = []
            r.data.forEach(row => {
                dates.push(dayjs.unix(row.date).format('MM/DD'))
                incomeOptions.value.series[0].data.push(Number(row.amount))
                chargeCountOptions.value.series[0].data.push(row.chargeOrderCount)
            })

            incomeOptions.value.xAxis[0].data = dates
            chargeCountOptions.value.xAxis[0].data = dates
        }

        if(inited.value == false) {
            inited.value = true
        }

        queryIng.value = false
    }


    queryData()
</script>

<style lang="scss" module>
    .items{
        display: flex;
        align-items: center;
        .item{
            flex: 1;
            margin-left: 20px;
            &:first-child{
                margin-left: 0;
            }
        }
    }

    .chart{
        height: 500px;
    }
</style>